<template>
	<view class="container" @touchstart="handleCloseOverlay">

		<view class="unified-sticky-container" :class="{ 'is-active': isHeaderSticky }">
			<!-- 吸顶后显示的搜索栏 -->
			<view class="header-sticky" :style="topBarStyle">
				<view class="header-sticky-left">
					<view class="header-sticky-icon" @click="goBack()">
						<u-icon name="arrow-left" color="#000" size="20"></u-icon>
					</view>
					<view class="header-sticky-avatar" @click="handleToPersonalHomepage(guideDetail.userId)">
						<image :src="guideDetail.avatar" mode=""></image>
					</view>
					<view class="header-sticky-name">
						{{ guideDetail.nickName }}
					</view>
					<view class="" v-if="guideDetail.userId !=$store.state.userInfo.userId">
						<view v-if="guideDetail.relationType == 1 || guideDetail.relationType == 3"
							@click="onFollow(guideDetail)" class="container-information-footer-right">
							<view class="container-information-footer-right-image">
								<image src="/static/guide/add-icon.png" mode=""></image>
							</view>
							<view class="container-information-footer-right-title">
								关注
							</view>
						</view>

						<view v-if="guideDetail.relationType == 2 || guideDetail.relationType == 4"
							@click="onFollow(guideDetail)" class="container-information-footer-right">
							<view class="container-information-footer-right-image">
								<image src="/static/guide/add-icon.png" mode=""></image>
							</view>
							<view class="container-information-footer-right-title">
								已关注
							</view>
						</view>
					</view>
				</view>
				<view class="header-sticky-right">
					<image src="/static/guide/more-horizontal.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="container-header">
			<u-swiper :list="list1" height="220" imgMode="aspectFill" radius="0" indicatorActiveColor="#fff"
				:indicator="true"></u-swiper>
			<view class="swiper-gradient-overlay"></view>
			<view class="back-button" @click="goBack()" v-show="!isHeaderSticky">
				<u-icon name="arrow-left" color="#000" size="20"></u-icon>
			</view>
			<view class="back-button-right" v-show="!isHeaderSticky">
				<image src="/static/guide/more-horizontal.png" mode=""></image>
			</view>
		</view>

		<view class="container-footer">
			<view class="container-information">
				<view class="container-information-left">
					<view class="container-information-left-img" @click="handleToPersonalHomepage(guideDetail.userId)">
						<image :src="guideDetail.avatar" mode=""></image>
					</view>
					<view class="container-information-left-content">
						<view class="container-information-left-content-top">
							<view class="container-information-left-content-top-left">
								<view class="container-information-left-content-top-name">
									{{ guideDetail.nickName }}
								</view>
								<view class="container-information-left-content-top-brige"
									:style="{ backgroundColor: getGenderBackgroundColor(guideDetail.ext1) }">
									<view class="container-information-left-content-top-brige-img">
										<u-icon :name="guideDetail.ext1 == '2' ? 'woman' : 'man'"
											:color="guideDetail.ext1 == '2' ? '#F07AB3' : '#39B1FB'" size="14"></u-icon>
									</view>
									<view class="container-information-left-content-top-brige-old"
										:style="{ color: getGenderTextColor(guideDetail.ext1) }">
										{{ guideDetail.ext2 }}
									</view>
								</view>
							</view>
							<view class="container-information-left-content-top-right"
								v-if="guideDetail.userId != $store.state.userInfo.userId">
								<view v-if="guideDetail.relationType == 1 || guideDetail.relationType == 3"
									@click="onFollow(guideDetail)" class="container-information-footer-right">
									<view class="container-information-footer-right-image">
										<image src="/static/guide/add-icon.png" mode=""></image>
									</view>
									<view class="container-information-footer-right-title">
										关注
									</view>
								</view>

								<view v-if="guideDetail.relationType == 2 || guideDetail.relationType == 4"
									@click="onFollow(guideDetail)" class="container-information-footer-right">
									<view class="container-information-footer-right-title">
										已关注
									</view>
								</view>
							</view>
						</view>

						<view class="container-information-bottom">
							<view class="container-information-bottom-item" v-if="guideDetail.years">
								<view class="container-information-bottom-item-left">
									<image src="/static/index/featured/icon_rz.png" mode=""></image>
								</view>
								<view class="container-information-bottom-item-right">
									入驻平台{{ guideDetail.years }}年
								</view>
							</view>

							<view class="container-information-bottom-item"
								v-if="guideDetail.guideType == 1 || guideDetail.guideType == 2 || guideDetail.guideType == 3">
								<view class="container-information-bottom-item-left">
									<image src="/static/index/featured/icon_cjxd.png" mode=""></image>
								</view>
								<view class="container-information-bottom-item-right">
									{{ guideDetail.guideType == 1 ? '初级向导' : guideDetail.guideType == 2 ? '中级向导' :guideDetail.guideType == 3 ? '高级向导' : '' }}
								</view>
							</view>
						</view>

						<view class="container-information-left-content-bottom" v-if="guideDetail.address">
							<view class="location">
								<image src="/static/guide/location.png" mode=""></image>
							</view>
							<view class="address">
								{{ guideDetail.address }}
							</view>
							<u-rate v-if="guideDetail.localScore > 0" :value="guideDetail.localScore" gutter="0"
								readonly size="20" activeColor="#ffaa00"></u-rate>
							<view class="rate">
								{{ guideDetail.localScore?guideDetail.localScore.toFixed(1) : ''}}
							</view>
						</view>
					</view>
				</view>
				<view class="container-information-tags">
					<view class="container-information-tags-item" v-for="(tag,tagIndex) in guideTags">
						{{ tag }}
					</view>
				</view>
				<view class="container-information-middle">
					<view class="title">
						<view class="title-content">
							{{ guideDetail.ext4 }}
						</view>
					</view>
				</view>

				<!-- <view class="container-information-footer">
					<view class="container-information-footer-right-box"
						v-if=" guideDetail.userId != $store.state.userInfo.userId">
						<view v-if="guideDetail.isGz == 1" @click="onFollow(guideDetail)"
							class="container-information-footer-right">
							<view class="container-information-footer-right-image">
								<image src="/static/guide/add-icon.png" mode=""></image>
							</view>
							<view class="container-information-footer-right-title">
								关注
							</view>
						</view>

						<view v-else @click="onFollow(guideDetail)" class="container-information-footer-right">
							<view class="container-information-footer-right-title">
								已关注
							</view>
						</view>
					</view>
				</view> -->
			</view>

			<view class="waterfall-section">
				<view class="TalentShow-header">
					<view class="tabs-container">
						<view class="TalentShow-title" :class="{ 'active': activeTab === 'dynamic' }"
							@click="switchTab('dynamic')">
							<view class="title-text">动态</view>
							<view class="TalentShow-img" v-if="activeTab === 'dynamic'">
								<image src="@/static/index_line.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="TalentShow-title" :class="{ 'active': activeTab === 'review' }"
							@click="switchTab('review')">
							<view class="title-text">评价</view>
							<view class="TalentShow-img" v-if="activeTab === 'review'">
								<image src="@/static/index_line.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="Explore-local-community-header-right" @click="handleOpenSearch()">
						<u-icon name="search" color="rgba(77, 77, 86, 1)" size="50rpx"></u-icon>
					</view>
				</view>

				<!-- Tab内容区域 -->
				<view class="tab-content">
					<!-- 动态内容 -->
					<view v-if="activeTab === 'dynamic'">
						<WaterfallPosts :left-list="leftList" :right-list="rightList"
							:active-long-press-post-id="activeLongPressPostId" @itemClick="navigateToPostDetail"
							@closeOverlay="handleCloseOverlay" @longPress="handleLongPress" @touchEnd="handleTouchEnd"
							@like="handleLikePost" />
						<u-loadmore :status="waterfallLoadStatus" />
					</view>

					<!-- 评价内容 (占位) -->
					<view v-if="activeTab === 'review'">
						<evaluate :guideUserId="guideDetail.userId"></evaluate>
					</view>
				</view>
			</view>

		</view>

		<!-- 底部悬浮的“参与话题”按钮 -->
		<view class="participate-button-container" @click="handleToChat(guideDetail)"
			v-show="guideDetail.userId != $store.state.userInfo.userId">
			<view class="participate-button">
				<!-- <u-icon name="/static/index/featured/icon_cyht.png" color="#fff" size="20"></u-icon> -->
				<!-- <text class="indexIconFont icon-canyuhuati-qianbi"></text> -->
				<text class="button-text">聊一聊</text>
			</view>
		</view>

		<richPostDetail :show="showRichPostDetail" @close="showRichPostDetail = false" :postData="currentDetail" />
	</view>
</template>

<script>
	import {
		getPosts,
		getClientFollow,
		getGuide,
		postCancelLike,
		postClientLike,
	} from '@/request/api.js';
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';
	import richPostDetail from '@/components/richPostDetail/richPostDetail.vue';
	import evaluate from './modal/evaluate.vue'
	export default {
		components: {
			WaterfallPosts,
			richPostDetail,
			evaluate
		},
		computed: {
			topBarStyle() {
				// #ifdef MP-WEIXIN
				if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
					const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo
						.capsuleRightPadding * 2;
					const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo
						.capsuleRightPadding;


					return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
				}
				// #endif
				// #ifdef APP-PLUS || H5
				return `padding-top: ${uni.getSystemInfoSync().statusBarHeight}px;`;
				// #endif
				return '';
			},
			guideTags() {
				if (!this.guideDetail.guideTag) return [];
				return this.guideDetail.guideTag.split(',');
			}
		},
		data() {
			return {
				list1: [
					"/static/guide/guideDetailBackground.png"
				],
				brigeList: [{
						imgUrl: '/static/guide/ruzhu.png',
						title: '入驻平台2年'
					},
					{
						imgUrl: '/static/guide/chujixiangdao.png',
						title: '初级向导'
					}
				],
				isHeaderSticky: false,
				isNewDesc: 2,
				waterfallPage: 1,
				waterfallPageSize: 8,
				isWaterfallLoading: false,
				waterfallLoadStatus: 'loadmore',
				guideDetail: {},
				leftList: [],
				rightList: [],
				activeLongPressPostId: null,
				showRichPostDetail: false,
				currentDetail: {},
				activeTab: 'dynamic', // 添加默认激活的tab
				userId: null
			};
		},
		onReady() {
			this.$nextTick(() => {
				this.getLayoutPositions();
			});
		},
		onLoad(options) {
			if (options.userId) {
				this.userId = options.userId
				this.initData(options.userId)
				this.loadPosts(true);
			}
			this.setStatusBarWhite();
		},
		onReachBottom() {
			this.loadPosts(false);
		},
		onPullDownRefresh() {
			//如果打开的是详情弹框，下拉刷新不掉接口
			if (this.showRichPostDetail) {

			} else {
				this.loadPosts(true);
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);

		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			const shouldBeSticky = scrollTop > 220;
			if (scrollTop > 220) {
				this.setStatusBarBlack()
			} else {
				this.setStatusBarWhite();
			}
			if (this.isHeaderSticky !== shouldBeSticky) {
				this.isHeaderSticky = shouldBeSticky;
			}
		},
		onBackPress(options) {
			// 优先关闭详情弹框
			if (options.from === 'backbutton' && this.showRichPostDetail) {
				// 需要触发组件的关闭
				this.showRichPostDetail = false
				return true;
			}

			return false;
		},
		methods: {
			initData(userId) {
				getGuide(userId).then(res => {
					if (res.data.code == 200) {
						this.guideDetail = res.data.data
						// 判断background是否有值，并转换为数组
						if (this.guideDetail.ext3 && this.guideDetail.ext3 !== '') {
							// 将逗号分割的字符串转换为数组
							this.list1 = this.guideDetail.ext3.split(',').map(url => url.trim()).filter(url =>
								url !== '');
						} else {
							// 如果没有背景图，使用默认图片
							this.list1 = [
								"http://www.hacn86.cn/common/2025/10/11/1760164439851_20251011143359A001.jpg"
							];
						}
					}
				})
			},
			handleLikePost(item) {
				const isLiked = item.isLiked;
				const api = isLiked ? postCancelLike : postClientLike;

				// UI即时反馈
				item.isLiked = !isLiked;
				item.likeCount += isLiked ? -1 : 1;

				api({
					postId: item.id,
					userId: this.$store.state.userInfo.userId
				}).catch(() => {
					// 失败时回滚
					item.isLiked = isLiked;
					item.likeCount += isLiked ? 1 : -1;
				});
			},
			getGenderBackgroundColor(gender) {
				switch (gender) {
					case 1: // 男性
						return '#D2EBFA'; // 浅蓝色背景
					case 2: // 女性
						return '#FBF0F4'; // 浅粉色背景
					default: // 未知/不限
						return '#f8f8f8'; // 默认灰色背景
				}
			},
			getGenderTextColor(gender) {
				switch (gender) {
					case 1: // 男性
						return '#39B1FB'; // 蓝色文字
					case 2: // 女性
						return '#F07AB3'; // 粉色文字
					default: // 未知/不限
						return '#ccc'; // 灰色文字
				}
			},
			handleToPersonalHomepage(userId) {
				uni.navigateTo({
					url: '/pages_sub/user/others/others?userId=' + userId
				})
			},
			switchTab(tabName) {
				if (this.activeTab !== tabName) {
					this.activeTab = tabName;
					// 可以在这里添加切换tab时的额外逻辑
					// 比如加载评价数据等
				}
			},
			// 聊一聊
			handleToChat(item) {
				const userParam = {
					userId: item.userId,
					nickName: item.nickName,
					avatar: item.avatar,
					isGuide: 1
				};
				uni.navigateTo({
					url: `/pages_sub/user/chat/chat?user=${JSON.stringify(userParam)}`
				});
			},
			handleOpenSearch() {
				console.log(111);
			},
			navigateToPostDetail(item) {
				this.currentDetail = item
				this.showRichPostDetail = true
			},
			onFollow(item) {
				// 根据当前relationType判断是关注还是取消关注
				const isFollowing = item.relationType == 2 || item.relationType == 4;
				const actionType = isFollowing ? 2 : 1; // 1:关注, 2:取消关注

				getClientFollow({
					userId: item.userId,
					type: actionType // 添加type参数告诉后端是关注还是取消关注
				}).then(res => {
					if (res.data.code == 200) {
						// 更新本地关注状态
						if (isFollowing) {
							// 取消关注后，relationType变为1或3
							item.relationType = item.relationType == 2 ? 1 : 3;
						} else {
							// 关注后，relationType变为2或4
							item.relationType = item.relationType == 1 ? 2 : 4;
						}

						// 更新页面数据，确保界面同步更新
						this.guideDetail = {
							...this.guideDetail
						};

						uni.showToast({
							title: isFollowing ? "取消关注成功" : "关注成功",
							icon: 'success',
						});
					} else {
						uni.showToast({
							title: res.data.message || (isFollowing ? "取消关注失败" : "关注失败"),
							icon: 'none',
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none',
					});
					console.error('关注操作失败:', err);
				});
			},
			handleSwitch(val) {
				if (this.isNewDesc === val) return;
				// 切换tab
				this.isNewDesc = val;

			},
			goBack() {
				uni.navigateBack()
			},
			getLayoutPositions() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.unified-sticky-container').boundingClientRect(data => {
					if (data) this.stickyHeaderHeight = data.height;
				}).exec();
			},
			async loadPosts(isRefresh = false) {
				if (this.isWaterfallLoading || (!isRefresh && this.waterfallLoadStatus === 'nomore')) return;
				this.isWaterfallLoading = true;
				this.waterfallLoadStatus = 'loading';
				if (isRefresh) {
					this.waterfallPage = 1;
					this.leftList = [];
					this.rightList = [];
				}
				const params = {
					userId: this.userId,
					queryType: 5,
					categoryId: 0,
					pageNum: this.waterfallPage,
					pageSize: this.waterfallPageSize,
					isNewDesc: 1
				};
				console.log('即将发送 getPosts 请求，参数为:', params);
				try {
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						const formattedPosts = (res.data.rows || []).map(this.formatApiData);
						this.distributePostsToColumns(formattedPosts);
						const hasMore = formattedPosts.length === this.waterfallPageSize;
						this.waterfallLoadStatus = hasMore ? 'loadmore' : 'nomore';
						if (hasMore) this.waterfallPage++;
					} else {
						this.waterfallLoadStatus = 'loadmore';
					}
				} catch (error) {
					this.waterfallLoadStatus = 'loadmore';
				} finally {
					this.isWaterfallLoading = false;
				}
			},
			distributePostsToColumns(newPosts) {
				newPosts.forEach(post => {
					if (this.leftList.length <= this.rightList.length) this.leftList.push(post);
					else this.rightList.push(post);
				});
			},
			handleLongPress(postId) {
				this.activeLongPressPostId = postId;
			},
			handleTouchEnd() {},
			handleCloseOverlay() {
				if (this.activeLongPressPostId !== null) {
					setTimeout(() => {
						this.activeLongPressPostId = null;
					}, 100);
				}
			},
			formatApiData(item) {
				const coverImage = (item.files && item.files.length > 0 && item.files[0].fileUrl) ? (item.files[0].fileUrl
					.startsWith('http') ? item.files[0].fileUrl : config.cdnURL + item.files[0].fileUrl) : '';
				const authorAvatar = item.avatar ? (item.avatar.startsWith('http') ? item.avatar : config.cdnURL + item
					.avatar) : '/static/demo/avatar_default.png';
				return {
					id: item.id,
					image: coverImage,
					content: item.content,
					author: {
						avatar: authorAvatar,
						name: item.nickName || '匿名用户',
						tag: Math.random() > 0.6 ? '高级土著' : ''
					},
					isLiked: item.isLiked,
					likeCount: item.likeCount,
					longPressTip: item.whisper || '尚未添加悄悄话',
					...item
				};
			},

			setStatusBarWhite() {
				// 设置状态栏前景色为白色
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},

			setStatusBarBlack() {
				// 如果需要切换回黑色
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.container {
		height: 100%;

		.unified-sticky-container {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 998;
			background-color: #ffffff;
			visibility: hidden;
			opacity: 0;
			transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

			&.is-active {
				visibility: visible;
				opacity: 1;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
			}

			.header-sticky {
				padding: 0 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				display: flex;
				justify-content: space-between;

				.header-sticky-left {
					display: flex;
					align-items: center;
					flex: 1;
					min-width: 0; // 允许子元素收缩

					.header-sticky-icon {
						margin-right: 20rpx; // 使用margin-right而不是margin-top
						flex-shrink: 0; // 防止图标被压缩
					}

					.header-sticky-avatar {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
						flex-shrink: 0; // 防止头像被压缩

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%; // 圆形头像
						}
					}

					.header-sticky-name {
						color: rgba(0, 0, 0, 1);
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 22rpx;
						min-width: 0; // 允许收缩
						white-space: nowrap; // 防止换行
						overflow: hidden; // 超出隐藏
						text-overflow: ellipsis; // 显示省略号
						max-width: 300rpx; // 设置最大宽度，避免挤压其他元素
					}

					.container-information-footer-right {
						width: 120rpx;
						height: 50rpx;
						border-radius: 30rpx;
						display: flex;
						margin: 5rpx 0;
						align-items: center;
						justify-content: center;
						background: linear-gradient(to right,
								rgba(255, 237, 32, 1),
								rgba(220, 230, 20, 1),
								rgba(183, 239, 7, 1));

						/* 添加内边距以确保内容不会紧贴边缘 */
						padding: 0 10rpx;

						.container-information-footer-right-image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 6rpx;
							/* 图片和文字之间的间距 */

							image {
								width: 26rpx;
								height: 26rpx;
								display: block;
							}
						}

						.container-information-footer-right-title {
							color: rgba(0, 0, 0, 1);
							font-weight: bold;
							font-size: 26rpx;
							line-height: 1;
							/* 确保文字垂直居中 */
						}
					}

					.container-information-footer-right-chat {
						width: 120rpx;
						height: 50rpx;
						border-radius: 30rpx;
						margin: 5rpx 0;
						padding: 0 10rpx;
						background: rgba(234, 234, 234, 1);
					}
				}

				.header-sticky-right {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0; // 防止右侧图标被压缩

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.container-header {
			height: 440rpx;
			margin-bottom: -20rpx;
			position: relative;

			.swiper-gradient-overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 90rpx;
				/* 渐变高度 */
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(248, 248, 248, 1));
				/* 从透明到半透明黑色 */
				z-index: 5;
				/* 确保在轮播图上方 */
				pointer-events: none;
				/* 不阻挡交互 */
				z-index: 1;
			}

			.back-button {
				position: fixed;
				top: calc(var(--status-bar-height) + 30rpx);
				left: 30rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.back-button-right {
				position: fixed;
				top: calc(var(--status-bar-height) + 30rpx);
				right: 30rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48rpx;
				height: 48rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.container-footer {

			.container-information {
				padding: 30rpx 30rpx 0;
				border-radius: 20rpx;
				background-color: #ffffff;
				margin-top: -20rpx;
				position: relative;
				z-index: 9;
				box-shadow: 0 12rpx 12rpx rgba(0, 0, 0, 0.06);

				/* 确保在轮播图上方 */
				.container-information-left {
					display: flex;
					width: 100%;

					.container-information-left-img {
						box-sizing: border-box;
						width: 150rpx;
						height: 150rpx;
						position: relative;
						border-radius: 50%;
						flex-shrink: 0;

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: linear-gradient(to bottom right, rgba(82, 226, 4, 1), rgba(255, 234, 5, 1));
							border-radius: 50%;
							z-index: -1;
						}

						&::after {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: #fff;
							border-radius: 50%;
							clip-path: circle(calc(50% - 6rpx) at center);
							z-index: -1;
						}

						image {
							width: 130rpx;
							height: 130rpx;
							border-radius: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							z-index: 1;
						}
					}

					.container-information-left-content {
						flex: 1;
						margin-left: 40rpx;
						min-width: 0;
						height: 150rpx;

						.container-information-left-content-top {
							display: flex;
							justify-content: space-between;
							margin-top: 10rpx;
							align-items: center;

							.container-information-left-content-top-left {
								display: flex;
								align-items: center;

								.container-information-left-content-top-name {
									font-size: 36rpx;
									font-weight: bold;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.container-information-left-content-top-brige {
									height: 30rpx;
									width: 80rpx;
									margin-left: 10rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									background-color: rgba(255, 237, 247, 1);
									border-radius: 16rpx;

									.container-information-left-content-top-brige-img {
										width: 24rpx;
										height: 24rpx;
										display: flex;
										align-items: center;
										justify-content: center;
										margin-right: 6rpx;

										image {
											width: 24rpx;
											height: 24rpx;
										}
									}

									.container-information-left-content-top-brige-old {
										display: flex;
										align-items: center;
										justify-content: center;
										height: 100%;
										color: rgba(250, 106, 184, 1);
										font-size: 24rpx;
										font-weight: bold;
									}
								}
							}

							.container-information-left-content-top-right {
								display: flex;

								.container-information-footer-right {
									width: 120rpx;
									height: 50rpx;
									border-radius: 30rpx;
									display: flex;
									margin: 5rpx 0;
									align-items: center;
									justify-content: center;
									background: linear-gradient(to right,
											rgba(255, 237, 32, 1),
											rgba(220, 230, 20, 1),
											rgba(183, 239, 7, 1));

									/* 添加内边距以确保内容不会紧贴边缘 */
									padding: 0 10rpx;

									.container-information-footer-right-image {
										width: 26rpx;
										height: 26rpx;
										margin-right: 6rpx;
										/* 图片和文字之间的间距 */

										image {
											width: 26rpx;
											height: 26rpx;
											display: block;
										}
									}

									.container-information-footer-right-title {
										color: rgba(0, 0, 0, 1);
										font-weight: bold;
										font-size: 26rpx;
										line-height: 1;
										/* 确保文字垂直居中 */
									}
								}

								.container-information-footer-right-chat {
									width: 120rpx;
									height: 50rpx;
									line-height: 50rpx;
									border-radius: 30rpx;
									margin: 5rpx 0 5rpx 20rpx;
									background-color: rgba(234, 234, 234, 1);
									padding: 0 10rpx;
									font-weight: bold;
									font-size: 26rpx;
									text-align: center;
								}
							}

						}

						.container-information-left-content-bottom {
							height: 30rpx;
							line-height: 30rpx;
							font-size: 26rpx;
							font-weight: 400;
							display: flex;
							margin-top: 14rpx;

							.location {
								width: 30rpx;
								height: 30rpx;

								image {
									width: 30rpx;
									height: 30rpx;
								}
							}

							.address {
								margin-left: 4rpx;
								margin-right: 10rpx;
								font-size: 22rpx;
								color: rgba(254, 113, 49, 1);
							}

							.star {
								width: 150rpx;
								height: 30rpx;
								margin-left: 30rpx;
								display: flex;

								image {
									width: 30rpx;
									height: 30rpx;
								}
							}

							.rate {
								font-size: 22rpx;
								margin-left: 12rpx;
							}
						}

						.container-information-bottom {
							display: flex;
							min-height: 36rpx; // 改为最小高度
							line-height: 36rpx;
							margin-top: 14rpx;

							.container-information-bottom-item {
								background-color: rgba(237, 238, 239, 1);
								display: flex;
								margin-right: 20rpx;
								border-radius: 20rpx;
								padding: 0 10rpx;

								.container-information-bottom-item-left {
									width: 32rpx;
									height: 32rpx;
									margin: 2rpx;

									image {
										width: 32rpx;
										height: 32rpx;
									}
								}

								.container-information-bottom-item-right {
									font-size: 20rpx;
									color: rgba(0, 0, 0, 1);
									font-weight: 400;
									margin-right: 10rpx;
									white-space: nowrap;
								}
							}
						}
					}
				}

				.container-information-tags {
					display: flex;
					flex-wrap: wrap; // 允许换行
					gap: 10rpx; // 设置间距
					margin-top: 20rpx; // 添加上边距

					.container-information-tags-item {
						border: 1rpx solid #787882;
						border-radius: 20rpx; // 添加圆角
						padding: 8rpx 16rpx; // 添加内边距
						font-size: 24rpx;
						color: #787882;
						background-color: #fff;
						white-space: nowrap; // 防止标签内文字换行
						line-height: 1;

						// 可选：添加悬停效果
						&:active {
							background-color: #f5f5f5;
						}
					}
				}

				.container-information-middle {
					margin-top: 20rpx;
					padding-bottom: 20rpx;

					.title {
						display: flex;

						.title-imgBox {
							width: 32rpx;
							height: 32rpx;
							margin-right: 20rpx;
							vertical-align: middle;

							image {
								width: 32rpx;
								height: 32rpx;
							}
						}

						.title-content {
							font-size: 26rpx;
							color: rgba(0, 0, 0, 1);
							line-height: 1.5;
							// 关键修改：设置文本内容的宽度为剩余空间
							flex: 1;
							// 确保文字不会被图片影响
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: normal;
							/* 允许换行 */
							// 添加最小宽度以确保布局稳定
							min-width: 0;
						}
					}
				}


				.container-information-footer {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					height: 60rpx;
					padding-bottom: 30rpx;

					.container-information-footer-left {
						display: flex;
						text-align: center;
						align-items: center;

						.container-information-footer-left-item {
							margin-right: 50rpx;

							.container-information-footer-left-item-top {
								color: rgba(0, 0, 0, 1);
								font-weight: 700;
								font-size: 28rpx;
							}

							.container-information-footer-left-item-bottom {
								color: rgba(120, 120, 130, 1);
								font-weight: 400;
								font-size: 22rpx;
							}
						}
					}


					.container-information-footer-right-box {
						display: flex;

						.container-information-footer-right {
							width: 120rpx;
							height: 50rpx;
							border-radius: 30rpx;
							display: flex;
							margin: 5rpx 0;
							align-items: center;
							justify-content: center;
							background: linear-gradient(to right,
									rgba(255, 237, 32, 1),
									rgba(220, 230, 20, 1),
									rgba(183, 239, 7, 1));

							/* 添加内边距以确保内容不会紧贴边缘 */
							padding: 0 10rpx;

							.container-information-footer-right-image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 6rpx;
								/* 图片和文字之间的间距 */

								image {
									width: 26rpx;
									height: 26rpx;
									display: block;
								}
							}

							.container-information-footer-right-title {
								color: rgba(0, 0, 0, 1);
								font-weight: bold;
								font-size: 26rpx;
								line-height: 1;
								/* 确保文字垂直居中 */
							}
						}

						.container-information-footer-right-chat {
							width: 120rpx;
							height: 50rpx;
							line-height: 50rpx;
							border-radius: 30rpx;
							margin: 5rpx 0 5rpx 20rpx;
							background-color: rgba(234, 234, 234, 1);
							padding: 0 10rpx;
							font-weight: bold;
							font-size: 26rpx;
							text-align: center;
						}
					}

				}
			}

			.container-footer-list {

				// 长图
				.container-footer-list-heightPicture {
					display: flex;
					margin-bottom: 30rpx;
					background-color: #fff;
					border-radius: 20rpx;
					height: 260rpx;

					.container-footer-list-heightPicture-left {
						width: 200rpx;
						border-radius: 20rpx;
						background-color: #666;
						height: 260rpx;

						image {
							border-radius: 20rpx;
							width: 200rpx;
							height: 260rpx;
							display: block;
						}
					}

					.container-footer-list-heightPicture-right {
						padding: 20rpx;
						flex: 1;
						min-width: 0; // 允许子元素收缩

						.container-footer-list-heightPicture-right-top {
							color: rgba(0, 0, 0, 1);
							font-size: 30rpx;
							font-weight: 400;
							line-height: 40rpx;
							margin-bottom: 10rpx;
							// 添加文本省略号样式
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.container-footer-list-heightPicture-right-bottom {
							font-size: 26rpx;
							line-height: 40rpx;
							color: rgba(77, 77, 86, 1);
							// 添加多行文本省略号样式
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 5;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				// 宽图
				.container-footer-list-widthPicture {
					margin-bottom: 30rpx;
					background-color: #fff;
					border-radius: 20rpx;

					.container-footer-list-widthPicture-img {
						width: 100%;
						border-radius: 20rpx;

						image {
							width: 100%;
							height: 260rpx;
							border-radius: 20rpx;
						}
					}

					.container-footer-list-widthPicture-content {
						padding: 20rpx;
						font-weight: 400;
						font-size: 30rpx;
						height: 40rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.waterfall-section {
				margin: 20rpx 0 0 0; // 修改顶部margin，增加与上方元素的间距
				padding-bottom: 130rpx;
				background-color: #ffffff; // 改为白色背景
				padding: 20rpx 10rpx 0;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				box-shadow: 0 -12rpx 12rpx rgba(0, 0, 0, 0.06);

				.TalentShow-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx 0;
					min-height: 60rpx;
					background-color: #ffffff;

					.tabs-container {
						display: flex;
						flex: 1;
					}

					.TalentShow-title {
						font-weight: bold;
						font-size: 30rpx;
						line-height: 30rpx;
						position: relative;
						height: 60rpx;
						display: flex;
						align-items: center;
						margin-right: 40rpx; // 添加右侧间距
						color: #666; // 默认颜色
						transition: color 0.3s ease; // 添加颜色过渡效果

						&.active {
							color: #000; // 激活状态颜色
						}

						.title-text {
							position: relative;
							z-index: 2;
						}

						.TalentShow-img {
							position: absolute;
							top: 70%;
							left: 0;
							transform: translateY(-50%);
							width: 100%;
							height: 26rpx;
							z-index: 1;

							image {
								width: 100%;
								height: 26rpx;
								display: block;
							}
						}
					}

					.Explore-local-community-header-right {
						// 可以保持原样或根据需要调整
					}
				}

				.tab-content {
					.review-placeholder {
						padding: 100rpx 0;
					}
				}
			}

		}

		/* 底部悬浮按钮样式 */
		.participate-button-container {
			position: fixed;
			bottom: 100rpx; // 距离底部距离，可根据tabbar调整
			left: 50%;
			transform: translateX(-50%);
			z-index: 990;
			width: 220rpx;
			height: 80rpx;

			.participate-button {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 30rpx;
				background-color: rgba(0, 0, 0, 0.6); // 修改为半透明黑色背景
				color: #fff;
				border-radius: 50rpx;
				box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);

				.button-text {
					font-size: 30rpx;
					background: linear-gradient(to bottom, #ffde06, #68ff0a);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
					font-weight: bold;
				}
			}
		}
	}
</style>